<template>
  <div class="preview" @click="onClick">
    <div class="preview-img">
      <div class="opt-box">
        <CloudDownloadOutlined :style="{fontSize: '44px', color: '#0d71ff'}" title="下载" @click="handleDownload" />
        <CloseOutlined :style="{fontSize: '44px', color: '#0d71ff'}" title="关闭" @click="onClick" />
      </div>
      <img :src="src" alt="预览图片" />
    </div>
  </div>
</template>

<script>
import { CloseOutlined, CloudDownloadOutlined } from '@ant-design/icons-vue'
import { doDownload } from '../../utils/common.js'

export default {
  name: 'ImgPreview',
  components: {
    CloseOutlined,
    CloudDownloadOutlined
  },
  props: {
    src: {
      type: String,
      default: '',
      required: true
    },
    srcName: {
      type: String,
      default: '',
      required: true
    },
    extName: {
      type: String,
      default: '',
      required: true
    },
    onClick: {
      type: Function, default: () => {
      }, required: true
    },
    onKeydown: {
      type: Function, default: () => {
      }, required: true
    }
  },
  setup(props, { emit }) {

    const { src, srcName, extName } = props

    const handleDownload = (e) => {
      e.stopPropagation()
      doDownload(src, srcName, extName)
    }

    return {
      handleDownload,
      CloseOutlined,
      CloudDownloadOutlined
    }
  }
}
</script>

<style lang="less" scoped>
.preview {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  overflow: scroll;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.preview-img {
  padding: 20px;
  display: inline-block;
  margin: auto;
  position: relative;

  img {
    max-width: 100%;
    max-height: 100%;
  }

  .opt-box {
    position: absolute;
    top: 34px;
    right: 40px;

    span {
      margin-left: 14px;
    }
  }
}
</style>
